<template>
	<view style="height:100vh">
		<layout>
			<view class="container">
				<!-- 顶部标签页 -->
				<view class="tabs">
					<view :class="['tab', activeKey === 'approved' ? 'active' : '']" @click="activeKey = 'approved'">
						已审核
					</view>
					<view :class="['tab', activeKey === 'pending' ? 'active' : '']" @click="activeKey = 'pending'">
						申请中
					</view>
				</view>

				<!-- 已审核订单列表 -->
				<view v-if="activeKey === 'approved'" class="order-list">
					<a-spin :spinning="list1" />
					<view v-for="item in approvedOrders" :key="item.id" class="card" @click="toggleExpand(item)">
						<view class="card-header">
							<text class="title">订单详情 {{ item.id }}</text>
							<text class="status-tag approved">{{item.status}}</text>
						</view>
						<view class="card-content">
							<view class="info-item">
								<uni-icons type="person" size="16" color="#666" />
								<text class="info-text">客户名称: {{ item.customerName }}</text>
							</view>
							<view class="info-item">
								<uni-icons type="list" size="16" color="#666" />
								<text class="info-text">出库单号: {{ item.outboundOrder }}</text>
							</view>
							<view class="info-item">
								<uni-icons type="settings" size="16" color="#666" />
								<text class="info-text">操作员: {{ item.operator }}</text>
							</view>
							<view class="info-item">
								<uni-icons type="calendar" size="16" color="#666" />
								<text class="info-text">时间: {{ item.timestamp }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 申请中订单列表 -->
				<view v-if="activeKey === 'pending'" class="order-list">
					<a-spin :spinning="list2" />
					<view v-for="item in pendingOrders" :key="item.id" class="card" @click="toggleExpand(item)">
						<view class="card-header">
							<text class="title">订单详情 {{ item.id }}</text>
							<text class="status-tag pending">{{item.status}}</text>
						</view>
						<view class="card-content">
							<view class="info-item">
								<uni-icons type="person" size="16" color="#666" />
								<text class="info-text">客户名称: {{ item.customerName }}</text>
							</view>
							<view class="info-item">
								<uni-icons type="list" size="16" color="#666" />
								<text class="info-text">出库单号: {{ item.outboundOrder }}</text>
							</view>
							<view class="info-item">
								<uni-icons type="settings" size="16" color="#666" />
								<text class="info-text">操作员: {{ item.operator }}</text>
							</view>
							<view class="info-item">
								<uni-icons type="calendar" size="16" color="#666" />
								<text class="info-text">时间: {{ item.timestamp }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 添加订单按钮 -->
				<view class="add-button" @click="showAddDialog">
					<uni-icons type="plus" size="24" color="#fff" />
				</view>

				<!-- 添加订单对话框 -->
				<uni-popup ref="addDialog" type="dialog">
					<view class="dialog-content">
						<view class="dialog-header">添加订单</view>
						<view class="dialog-body">
							<uni-forms :model="form" label-width="80px">
								<uni-forms-item label="客户名称">
									<el-select v-model="form.customerName">
										<el-option v-for="item in suppers" :label="item.dictLabel"
											:value="item.dictValue" />
									</el-select>
								</uni-forms-item>
								<uni-forms-item label="操作员">
									<el-select v-model="form.operator">
										<el-option v-for="item in applyUsers" :label="item.dictLabel"
											:value="item.dictValue" />
									</el-select>
								</uni-forms-item>
								<uni-forms-item label="时间">
									<uni-datetime-picker v-model="form.timestamp" type="datetime" />
								</uni-forms-item>
							</uni-forms>
						</view>
						<view class="dialog-footer">
							<button class="btn-cancel" @click="handleCancel">取消</button>
							<button class="btn-submit" @click="handleAddOrder">提交</button>
						</view>
					</view>
				</uni-popup>
			</view>
		</layout>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		auditOutWarehouseApply,
		getOutWarehouseApply,
		listOutWarehouseApply4Audit,
		addOutWarehouseApply
	} from "@/api/wmsApply/outWarehouseApply";
	import {
		getQueryData
	} from "@/api/query/comQuery";
	import {
		getDicts
	} from "@/api/system/dict/data";
	// 状态管理
	const activeKey = ref('approved');
	const addDialog = ref(null);
	const form = ref({
		outboundOrder: '',
		customerName: '',
		operator: '',
		timestamp: '',
	});

	// 数据
	const approvedOrders = ref([

	]);
	const list1 = ref(true)
	const list2 = ref(true)
	const pendingOrders = ref([]);

	// 打开添加订单对话框
	const showAddDialog = () => {
		addDialog.value.open();
	};

	// 处理添加订单
	const handleAddOrder = () => {
		
		addOutWarehouseApply({
			applyUser: form.value.operator,
			applyTime: form.value.timestamp,

			customerId: form.value.customerName
		}).then(ref => {
			uni.showToast({
				title: '订单添加成功',
				icon: 'success',
			});
			addDialog.value.close();
			getList2();
			form.value = {
				outboundOrder: '',
				customerName: '',
				operator: '',
				timestamp: '',
			};
		})

	};

	// 取消添加订单
	const handleCancel = () => {
		addDialog.value.close();
	};

	// 切换卡片展开状态
	const toggleExpand = (item) => {
		item.expanded = !item.expanded;
	};
	async function getDictVaule(name, id) {
		try {
			const ref = await getDicts(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {
			console.error("获取字典项失败:", error);
			return null;
		}
	}

	async function getQuery(name, id) {
		try {
			if (id != null) {
				const ref = await getQueryData(name);
				let item = ref.data.find(item => item.dictValue === id) || null;
				return item.dictLabel;
			}
		} catch (error) {
			return null;
		}
	}
	async function getList1() {
		try {
			const ref = await listOutWarehouseApply4Audit({
				pageNum: 1,
				pageSize: 200,
				applyStatus: 2
			});

			let d = []
			// 使用 for...of 循环处理异步操作
			for (const item of ref.rows) {
				const applyStatus = await getDictVaule("apply_status", item.applyStatus); // 等待 getDictVaule 完成
				const sup = await getQuery("query_customer", item.customerId + ''); // 等待 getDictVaule 完成
				const admin = await getQuery("query_user", item.applyUser); // 等待 getQueryDa


				let a = {
					title: '订单详情 ' + item.id,
					extra: applyStatus,
					outboundOrder: item.serialNo,
					customerName: sup,
					operator: admin,
					timestamp: item.applyTime,
				};

				d.push(a);
			}
			console.log(d);
			approvedOrders.value = d;
			list1.value = false
		} catch (error) {
			console.error("获取列表失败:", error);
		}
	}
	getList1();
	async function getList2() {
		try {
			const ref = await listOutWarehouseApply4Audit({
				pageNum: 1,
				pageSize: 200,
				applyStatus: 1
			});
			console.log(ref)

			let d = []
			// 使用 for...of 循环处理异步操作
			for (const item of ref.rows) {
				const applyStatus = await getDictVaule("apply_status", item.applyStatus); // 等待 getDictVaule 完成
				const sup = await getQuery("query_customer", item.customerId + ''); // 等待 getDictVaule 完成
				const admin = await getQuery("query_user", item.applyUser); // 等待 getQueryDa

				let a = {
					title: '订单详情 ' + item.id,
					extra: applyStatus,
					outboundOrder: item.serialNo,
					customerName: sup,
					operator: admin,
					timestamp: item.applyTime,
				};

				d.push(a);
			}
			console.log(d);
			pendingOrders.value = d;
			list2.value = false;
		} catch (error) {
			console.error("获取列表失败:", error);
		}
	}
	getList2();
	const applyUsers = ref();
	const suppers = ref();
	getQueryData("query_user").then(ref => {
		applyUsers.value = ref.data;
	})
	getQueryData("query_customer").then(ref => {
		suppers.value = ref.data;
	})
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;
	}

	.tab {
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		color: #666;
		border-bottom: 4rpx solid transparent;
	}

	.tab.active {
		color: #007aff;
		border-bottom-color: #007aff;
	}

	.order-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.card {
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.status-tag {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.status-tag.approved {
		background: #e6f7ff;
		color: #007aff;
	}

	.status-tag.pending {
		background: #fff7e6;
		color: #fa8c16;
	}

	.card-content {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.info-text {
		font-size: 28rpx;
		color: #666;
	}

	.add-button {
		position: fixed;
		bottom: 40rpx;
		right: 40rpx;
		width: 100rpx;
		height: 100rpx;
		background: #007aff;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
	}

	.dialog-content {
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx;
	}

	.dialog-header {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.dialog-footer {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
		margin-top: 40rpx;
	}

	.btn-cancel,
	.btn-submit {
		padding: 16rpx 32rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.btn-cancel {
		background: #f5f5f5;
		color: #666;
	}

	.btn-submit {
		background: #007aff;
		color: #fff;
	}
</style>